<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@page import="method.TimePeriod"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
	<link type="text/css" href="layout.css" rel="stylesheet">
	<link type="text/css" href="css/jquery-ui-1.8.9.custom.css" rel="stylesheet" />  
	<script type="text/javascript" src="./js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="./js/jquery-ui-1.8.8.custom.min.js"></script>
	<script src="./development-bundle/ui/jquery.ui.core.js"></script> 
	<script src="./development-bundle/ui/jquery.ui.widget.js"></script> 
	<script src="./development-bundle/ui/jquery.ui.button.js"></script> 
	<script type="text/javascript" src="./lib/loadImage.js"></script>
<script type="text/javascript" src="./lib/animation.js"></script>
<script type="text/javascript" src="./lib/trajectory.js"></script>
<script type="text/javascript" src="./lib/listener.js"></script>
<script type="text/javascript" src="./lib/showLatLng.js"></script>
<script type="text/javascript" src="./lib/global.js"></script>
<script type="text/javascript" src="./lib/transection.js"></script>
<script type="text/javascript" src="./lib/maps.google.polygon.containsLatLng.js"></script>
<script type="text/javascript" src="./lib/z-level.js"></script>
<script type="text/javascript" src="./lib/changeDate.js"></script>



<script type="text/javascript">
  var map;
  var overlaysArray=[];
  
  var vname="DINO01";
  var date;
  var time;
  
  /*
  $(document).ready(function () {
  	var current_date=new Date();
  	var one_month_before_max_date=new Date(new Date().getFullYear(),7,1);
  	if (current_date.getTime()<one_month_before_max_date.getTime())
		changeDate(null,current_date);
	else
		changeDate(null,one_month_before_max_date);
});
*/
  function initialize() {
     map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);  
        
     map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
     
     InitLatlng(map);
         	
  	google.maps.event.addListener(map, 'click', function(event) {
  	 if(limitArea_polygon.containsLatLng(event.latLng)){
		if (transection_array.length<2){
    	marker=new google.maps.Marker({
			position:event.latLng,
			map:map
		});
    	transection_array.push(event.latLng);
	 }
	 }
	else{
		alert("Sorry, this is outside our support domain.");
	
		}
  	}); 
  	
  	
  	$(function() {
		$( "#vname" ).buttonset();
		$( "#dates" ).buttonset();
		$( "#time" ).buttonset();
	});
	
	$('#vname > p > input').bind("click",
			function(){
				vname=this.id;
						});
	$('#dates > div > input').bind("click",
			function(){
				date=this.id;
						});
 	$('#time > input').bind("click",
			function(){
				time=this.id;
						});     
	
	$(function() {
		$( "#datepicker" ).datepicker({
	             changeMonth: true,
				 changeYear: true,	
				 
				 //Date range from Feb to Aug of current year
				 maxDate: max_date,
				 minDate: min_date,
				 
				 onSelect: function(dateText,inst){
			 		changeDate(dateText,null);
			 	}
		});
	});
}

</script>

</head>
<body onLoad="initialize()">
		<div id="logo" >
			<jsp:include page="banner.jsp"></jsp:include>
		</div>
  		<div id="box">
<div id="links" >
	<jsp:include page="left_column.jsp"></jsp:include>
</div>
  <div id="map_canvas"></div>
			<form>
			<div id="vname" style="position:absolute; left: 1003px; top: 2px;">
		      <p>Instruction:</p>
		      <p>Select two locations on the map and the criteria below, click on &quot;Show transect&quot;</p>
			    <p><span class="text">Variables:</span>
			      <br/><input type="radio" id="temp" name="radio" />
			      <label for="temp">temperature</label> 
			      <br/><input type="radio" id="salt" name="radio"   />
			      <label for="salt">salinity</label> 
			      <br/><input type="radio" id="u" name="radio"  />
			      <label for="u">u</label> 
			      <br/><input type="radio" id="v" name="radio"  />
			      <label for="v">v</label>
			      <br/><input type="radio" id="DINO01" name="radio" checked="checked"/>
			      <label for="DINO01">Alexandrium fundyense</label>
		      </p>
            </div>
			</form>
			<form>
			<div id="dates" style="position:absolute; left:1003px; top:280px;" >
			<span class="text">Dates:</span>
					<div id="dates_scroll" style="overflow: auto; height: 200px; width: 150px;">					
					<%
						TimePeriod tp=new TimePeriod();
						ArrayList<String> dates=tp.getTimePeriod();
						for(int i=dates.size()-30;i<dates.size();i++)
						{
							String str_date_format=dates.get(i).subSequence(4,6)+"/"+dates.get(i).substring(6,8)+"/"+dates.get(i).substring(0,4);
							%>
							<br/><input type="radio" id="<%=dates.get(i)%>" name="radio" /><label for="<%=dates.get(i)%>"><%=str_date_format%></label>							
							<%
						}
					%>	
					</div>
		  </div>
		  </form>
		  <form>
			<div id="time" style="position:absolute; left:1003px; top:500px;">
				<span class="text">Time:</span>
			  <% for (int i=0;i<=12;i+=12)
			  {
			  		double value=i;
			   %>
			  <br/><input type="radio" id="<%=value/24.0  %>" name="radio"/><label for="<%=value/24.0%>"> <%=i %>:00</label>
			  <%
			  } 
			  %>
			</div>
		 </form>
			<form>
            <div style="position:absolute; left:1003px; top:585px">
		<input type="button" onClick="showTransecton();" value="Show Transect"/>
        <input type="button" onClick="window.location.href=window.location.href" value="Clear"/>
			</div>
			</form>
			<div style="position:absolute; left:1003px; top:615px">
				<div id="archive_0">
		  	 	<a  href="#" onClick="showDatepicker()">Archive</a>	
		  		</div>
		  		<dir id="archive_1" style="visibility: hidden;">
		  		Please select the date below: <input type="text" id="datepicker"> 
		  </dir>
			
			</div>
	      <div id="footer">
        	<jsp:include page="footer.jsp"></jsp:include>
        </div>
	</div>
</body>
</html>
